﻿<template>
  <base-dialog
    destroy-on-close
    show-footer
    :width="700"
    v-model="modalShow"
    :title="modalType === 'add' ? '新增增值服务' : '编辑增值服务'"
    @close="hide"
  >
    <el-form ref="serviceFormRef" :model="serviceForm" :rules="formRule" label-width="auto">
      <el-form-item label="增值服务类型" prop="type">
        <el-select v-model="serviceForm.type" placeholder="请选择增值服务类型">
          <el-option v-for="item in serviceList" :key="item.id" :label="item.dictLabel" :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="增值服务名称" prop="name">
        <el-input v-model="serviceForm.name" :maxlength="20" placeholder="请输入增值服务名称" />
      </el-form-item>
      <el-form-item label="增值服务内容" prop="content">
        <el-input v-model="serviceForm.content" type="textarea" :maxlength="500" placeholder="请输入增值服务内容" />
      </el-form-item>
      <el-form-item label="增值服务价格" prop="price">
        <el-input-number
          v-model="serviceForm.price"
          :min="0"
          :controls="false"
          placeholder="请输入增值服务价格"
          :align="'left'"
          :style="{ width: '180px' }"
        />
      </el-form-item>
      <el-form-item label="增值服务说明" prop="description">
        <el-input v-model="serviceForm.description" type="textarea" :maxlength="500" placeholder="请输入增值服务说明" />
      </el-form-item>
      <el-form-item label="是否强制购买" prop="forceFlag">
        <el-radio-group v-model="serviceForm.forceFlag">
          <el-radio :value="1">强制购买</el-radio>
          <el-radio :value="0">不强制购买</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="平台佣金" prop="rentPercent">
        <el-input-number
          v-model="serviceForm.rentPercent"
          :min="0"
          :controls="false"
          placeholder="请输入平台佣金"
          :align="'left'"
        >
          <template #suffix>
            <span>%</span>
          </template>
        </el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="hide">取消</el-button>
      <el-button type="primary" @click="operateConfirm">确认</el-button>
    </template>
  </base-dialog>
</template>

<script setup lang="js">
  const props = defineProps({
    visble: { type: Boolean, default: false },
    currentInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    serviceList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    modalType: { type: String, default: "add" },
  });
  const emit = defineEmits(["hide", "confirm"]);
  // 监听显隐
  watch(
    () => props.visble,
    v => {
      modalShow.value = v;
      if (props.visble) {
        init();
      }
    }
  );
  // 显示、隐藏
  const modalShow = ref(false);
  // 表单ref
  const serviceFormRef = ref();
  // 表单内容
  const serviceForm = reactive({
    type: "",
    name: "",
    content: "",
    price: 0,
    description: "",
    forceFlag: 1,
    rentPercent: 0,
  });
  // 表单规则
  const formRule = reactive({
    type: [{ required: true, message: "请选择增值服务类型", trigger: "blur" }],
    name: [{ required: true, message: "请输入增值服务名称", trigger: "blur" }],
    content: [{ required: true, message: "请输入增值服务内容", trigger: "blur" }],
    price: [{ required: true, message: "请输入增值服务价格", trigger: "blur" }],
    description: [{ required: false, message: "请输入增值服务说明", trigger: "blur" }],
    forceFlag: [{ required: true, message: "请选择是否强制购买", trigger: "blur" }],
    rentPercent: [{ required: true, message: "请输入平台佣金", trigger: "blur" }],
  });
  // 初始化
  const init = () => {
    if (props.modalType === "edit") {
      const { type, name, content, price, description, forceFlag, rentPercent, additionalType } = props.currentInfo;
      Object.assign(serviceForm, {
        type: additionalType,
        name,
        content,
        price,
        description,
        forceFlag,
        rentPercent,
      });
    }
  };
  // 关闭
  const hide = refresh => {
    Object.assign(serviceForm, {
      type: "",
      name: "",
      content: "",
      price: 0,
      description: "",
      forceFlag: 1,
      rentPercent: 0,
    });
    emit("hide", refresh);
  };
  // 确认
  const operateConfirm = () => {
    serviceFormRef.value.validate(valid => {
      console.warn(valid, serviceForm);
      if (!valid) {
        return;
      }
      if (props.modalType === "add") {
        Api.product.addNewService(serviceForm).then(res => {
          $msg.success("新增成功");
          hide(true);
        });
      } else {
        const params = {
          ...serviceForm,
          id: props.currentInfo.id,
        };
        Api.product.editService(params).then(res => {
          $msg.success("操作成功");
          hide(true);
        });
      }
    });
  };
</script>
